<template>
  <b-container fluid>
    <!-- 导航栏 -->
    <b-row>
      <NavigationBar :type="0" />
    </b-row>
    <b-row>
      <b-container style="font-family:HYZhengYuan-55S">
        <!-- 显示为动态的 -->
        <b-row class="mt-2">
          <!-- 左侧功能按钮 -->
          <b-col class="col-2 text-center">
            <!-- 点赞 -->
            <b-row v-if="this.$route.query.type != 'article'" class="px-2">
              <b-list-group-item href="#" @click="toGood" class="border">
                <span :class="isGood?'iconfont icon-good-fill':'iconfont icon-good'" style="font-size:30px" /><br>
                <span>{{isGood?'已点赞':'点赞'}}</span>
              </b-list-group-item>
            </b-row>
            <!-- 评论 -->
            <b-row class="px-2" :class="{'mt-2':this.$route.query.type != 'article'}">
              <b-list-group-item href="#" @click="commentEdit(1,null,null,null)" class="border">
                <span class="iconfont icon-comment" style="font-size:30px" /><br>
                <span>评论</span>
              </b-list-group-item>
            </b-row>
            <!-- 收藏 -->
            <!-- <b-row class="px-2 mt-2" v-if="this.$route.query.type == 'article'">
            <b-list-group-item href="#" @click="toStar" class="border-0">
              <span :class="favorite.style" style="font-size:30px" /><br>
              <span>{{favorite.text}}</span>
            </b-list-group-item>
          </b-row> -->
          </b-col>
          <!-- 中间内容详情 -->
          <b-col>
            <!-- 第一行内容 -->
            <b-row class="bg-white mb-2 rounded border">
              <Article v-if="this.$route.query.type == 'article'" :id="this.$route.query.id" ref="entity" />
              <Dynamic v-if="this.$route.query.type == 'dynamic'" :id="this.$route.query.id" ref="entity" />
            </b-row>

            <!-- 第二行评论区 --><!-- 评论结构体 循环-->
            <b-row v-for="(c,index) in commentList.data" :key="c.id" class="bg-white px-3 border-left border-right"
              :class="{'border-top':index == 0,'rounded-top':index==0}">
              <!-- 无意中发现原来可以row 套 row 只有在template那不能套？ -->
              <b-col :class="{'border-bottom':index!=4}">
                <!-- 头像和用户名 -->
                <b-row>
                  <b-col @click="toUserPage(c.user.id)" class="col-auto pt-2">
                    <b-img-lazy rounded="circle" class="border user" width="50" height="50"
                      blank-src="https://s1.imagehub.cc/images/2023/03/11/64854baae2c410c756c1e1c6aaf4dc32.png" :src="c.user.headUrl" />
                  </b-col>
                  <b-col style="font-size:16px">
                    <b-row @click="toUserPage(c.user.id)" class="pt-2 user">
                      <b-col class="px-0 col-auto">
                        {{c.user.name}}
                      </b-col>
                      <b-col class="px-0 col-auto ml-1">
                        <b-badge style="font-size:11px">Lv{{c.user.level}}</b-badge>
                      </b-col>
                    </b-row>
                    <b-row class="text-muted">
                      <b-col class="col-auto px-0">
                        #{{c.row}}楼 · {{getTime(c.time)}} ·
                      </b-col>
                      <b-col class="col-auto pl-1">
                        <b-link @click="commentEdit(2,c.id,'@' + c.user.name + ': ' + c.content,c.id)" class="text-muted">回复</b-link>
                      </b-col>
                    </b-row>
                  </b-col>
                  <!-- 评论的点赞 -->
                  <b-col class="col-auto">
                    <b-row class="pr-4">
                      <GoodIcon :type="1" :isLikeInfo="c.isLike" :id="c.id" :num="c.likeNum" />
                    </b-row>
                  </b-col>
                </b-row>
                <!-- 评论内容 -->
                <b-row class="mt-2">
                  <b-col class="col-auto pt-2">
                    <div style="height:50px;width:50px" />
                  </b-col>
                  <b-col class="mr-4">
                    <b-row>
                      <p>{{c.content}}</p>
                    </b-row>
                  </b-col>
                </b-row>
                <!-- 评论区的评论区 -->
                <b-row>
                  <b-col class="col-auto pt-2">
                    <div style="height:50px;width:50px" />
                  </b-col>
                  <CommentsView v-if="c.commentList.data.length>0" :key="c.id" :coid="c.id" :data="c.commentList" />
                </b-row>
              </b-col>
            </b-row>

            <b-row class="bg-white rounded text-center">
              <b-col v-if="commentList.data.length == 0 && commentLoading==false" class="border-bottom rounded-bottom">暂无评论</b-col>
              <b-col v-else class="text-center border-left border-right border-bottom rounded-bottom">
                <h6>--到底啦--</h6>
              </b-col>
              <b-col v-show="commentLoading" class="h-100 text-center">
                <b-spinner md /> 加载中
              </b-col>
            </b-row>

            <!-- 翻页 -->
            <b-row v-if="commentList.data.length > 0 && commentList.total > 5">
              <b-col>
                <b-pagination-nav prev-text="上一页" next-text="下一页" use-router :base-url="pagination.baseURL" :value="commentList.page" align="center" size="md"
                  :number-of-pages="pagination.total" />
              </b-col>
            </b-row>

          </b-col>
          <!-- 右侧用户信息 -->
          <b-col class="ml-2 col-auto rounded" style="font-size:18px;">
            <b-row class="text-center border" style="width:325px">
              <b-col class="bg-white rounded">
                <b-row class="mt-2">
                  <b-col class="text-left">
                    <h4 style="font-family:HYZhengYuan-85S">最近活跃用户</h4>
                  </b-col>
                </b-row>
                <b-row class="mt-1 px-3" v-for="(c,index) in recentComment.data" :key="c.id+'_1'">
                  <b-col @click="toUserPage(c.user.id)" class="col-auto pt-2" :class="{'border-bottom':index!=9}">
                    <b-img-lazy rounded="circle" class="border user" width="40" height="40"
                      blank-src="https://s1.imagehub.cc/images/2023/03/11/64854baae2c410c756c1e1c6aaf4dc32.png" :src="c.user.headUrl" />
                  </b-col>
                  <b-col style="font-size:16px" :class="{'border-bottom':index!=9}">
                    <b-row class="pt-2">
                      <b-col class="px-0 col-auto" style="font-size:16px">
                        {{c.user.name}}
                      </b-col>
                      <b-col class="pl-2 col-auto" style="font-size:12px">
                        <b-badge>
                          Lv{{c.user.level}}
                        </b-badge>
                      </b-col>
                      <b-col class="text-right mt-1 pr-0" style="font-size:13px">
                        {{getTime(c.time)}}
                      </b-col>
                    </b-row>
                    <b-row class="text-muted text-left mt-1 mb-1">
                      <span style="font-family:HYZhengYuan-55S;font-size:16px">{{c.content}}</span>
                    </b-row>
                  </b-col>
                </b-row>
              </b-col>

              <div class="w-100" />
              <b-col>
                <!-- 返回顶部 -->
                <transition appear name="animate__animated animate__bounce" enter-active-class="animate__fadeInUp">
                  <b-col v-show="topVisable" style="margin-top:655px">
                    <b-row>
                      <b-col class="px-0 col-md-auto">
                        <b-list-group-item href="#" @click="toTop()" title="回到顶部">
                          <span class="iconfont icon-direction-up" style="font-size:22px" />
                        </b-list-group-item>
                      </b-col>
                    </b-row>
                  </b-col>
                </transition>
              </b-col>
            </b-row>

          </b-col>
        </b-row>
      </b-container>
      <!-- 一个模拟框 -->
      <b-modal id="comment" title="发布评论" header-class="border-0" footer-class="border-0" button-size="sm" hide-header-close ok-title="发布" cancel-title="取消"
        :no-close-on-backdrop="true" aria-hidden="true" centered @ok="issueComment">
        <b-row>
          <b-col class="overflow-hidden col-9" style="text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical;">
            <span class="text-primary" v-html="commentEntity.name" />
          </b-col>
        </b-row>
        <b-row class="mt-4">
          <b-col>
            <b-textarea maxlength="200" autofocus v-model="textContent" class="textArea" no-resize />
          </b-col>
          <div class="w-100" />
          <b-col class="text-right">
            <span v-show="textContent.length==200" class="text-danger mr-2">输入达到上限</span> {{textContent.length}}/200
          </b-col>
        </b-row>
      </b-modal>
    </b-row>
  </b-container>

</template>
<script>
import Article from './content/Article';
import Dynamic from './content/Dynamic'
import CommentsView from './comment/CommentsView'
import tool from '@/utils/tool';
import NavigationBar from '../NavigationBar';
import GoodIcon from './comment/GoodIcon';

export default {
  components: {
    Article,
    Dynamic,
    CommentsView,
    NavigationBar,
    GoodIcon
  },
  data() {
    return {
      //关注按钮的变量
      concerned: {
        isConcerned: false,
        style: 'success',
        text: '关注'
      },
      //点赞按钮的变量
      isGood: false,
      //收藏按钮的变量
      favorite: {
        isFavorite: false,
        text: '收藏',
        style: "iconfont icon-favorite"
      },
      //评论编辑框内容
      textContent: '',
      //右下角返回顶部的显示与否
      topVisable: false,
      //评论区数据
      commentList: {
        data: []
      },
      //分页组件
      pagination: {
        page: null,
        total: null,
        baseURL: "/ContentDetail?id=" + this.$route.query.id + "&type=" + this.$route.query.type + "&page=",
      },
      //评论区是顺序 正序1 倒序0
      order: 1,
      //控制评论框的评论对象
      commentEntity: {
        id: null,
        name: "----",
        type: null,
      },
      //最近评论
      recentComment: {
        data: null,
      },
      commentLoading: true
    }
  },

  mounted() {
    // 添加监听事件
    window.addEventListener("scroll", this.scrolling);
    //获取评论区数据
    this.$httpIssue.getRecentComment().then((res) => {
      console.log(res);
      this.recentComment = res;
      this.updatePage(1, this.$route.query.id);
    }).catch((err) => {
      console.log(err);
    })
  },
  beforeRouteUpdate(to) {
    this.updatePage(to.query.page, to.query.id);
  },
  methods: {
    //点赞后操作
    toGood() {
      if (this.isGood == true) {
        this.$httpIssue.toLike(this.$refs.entity.dynamic.id, "dynamic").then((res) => {
          console.log(res);
          if (res == "1") {
            this.$httpIssue.isLike(this.$refs.entity.dynamic.id).then((res) => {
              if (res == "0") {
                this.isGood = false;
              }
            })
          }
        })
        return
      } else {
        this.$httpIssue.toLike(this.$refs.entity.dynamic.id, "dynamic").then((res) => {
          if (res == "1") {
            this.$httpIssue.isLike(this.$refs.entity.dynamic.id).then((res) => {
              if (res == "1") {
                this.isGood = true;
              }
            })
          }
        })
      }
      //   console.log("数据库点赞");
    },
    //关注后操作
    toConcerned() {
      this.concerned.isConcerned = true;
      this.concerned.style = '';
      this.concerned.text = '已关注'
      //   console.log("数据库关注");
    },
    //收藏后操作
    toStar() {
      if (this.favorite.isFavorite == true) {
        this.favorite.isFavorite = false;
        this.favorite.style = 'iconfont icon-favorite';
        this.favorite.text = '收藏';
        return
      }
      this.favorite.isFavorite = true;
      this.favorite.style = 'iconfont icon-favorite-filling';
      this.favorite.text = '已收藏';
    },
    //监听滚动条
    scrolling() {
      let current =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (current >= 700) {
        this.topVisable = true;
      } else {
        this.topVisable = false;
      }
    },
    //设置滚动条
    toTop() {
      let current =
        document.documentElement.scrollTop || document.body.scrollTop;
      const top = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = current -= 50;
        if (current <= 0) {
          clearInterval(top);
        }
      }, 10);
    },
    //更新页面
    updatePage(page, id) {
      this.commentLoading = true;
      this.$httpIssue.getEntityCommentList(page, id, this.order).then((res) => {
        // console.log(res);
        this.commentList = res;
        this.pagination.page = res.page;
        this.pagination.total = Math.ceil(res.total / 5);
        for (let i = (res.page - 1) * res.size; i < res.data.length; i++) {
          this.commentList.data[i].row = i + 1;
        }
        this.commentLoading = false;
      })
    },
    //获取时间
    getTime(time) {
      return tool.transTime(time);
    },
    //跳转到该用户主页
    toUserPage(id) {
      this.$pageRedirect.toPersonPage(id);
    },
    //发送评论
    issueComment() {
      console.log(this.commentEntity.id, this.commentEntity.type);
      if (this.textContent == '') {
        return
      }
      var comment = JSON.stringify({
        commentId: this.commentEntity.id,
        content: this.textContent,
        type: this.commentEntity.type
      })
      this.$httpIssue.commentIssue(comment);
    },
    //评论编辑框
    commentEdit(id, comment_id, name, type) {
      //设置评论请求体
      switch (id) {
        //评论文章/动态
        case 1: {
          this.commentEntity.id = this.$route.query.id;
          this.commentEntity.name = this.$refs.entity.content_pre;
          this.commentEntity.type = this.$route.query.type;
          break;
        }
        //评论评论
        case 2: {
          this.commentEntity.id = comment_id;
          this.commentEntity.name = name;
          this.commentEntity.type = type;
          break;
        }
      }
      this.$bvModal.show('comment')
    },
  },
}
</script>
<style scoped>
.btn:focus,
.textArea:focus {
  outline: none;
  box-shadow: none;
}
.textArea {
  height: 110px;
}
.user:hover {
  cursor: pointer;
}
</style>
